<template>
  <div class="header">
    <div>
      <img src="@/assets/logo-font.png" alt="Cartoonist" class="logo-font">
    </div>
    <div class="input_box">
      <div style="float: left;">
        <img src="@/assets/input_box_logo.png" alt="图片加载失败" class="input_box_logo">
      </div>
      <div>
        <input type="text" placeholder="输入书名" class="input_book_name_text">
      </div>
      <div>
      <input type="text" placeholder="请输入相关词句，例如三个女孩儿，漫画家" class="input_relative_sentence">
    </div>
    </div>
    <button class="create_main_page_button">封面</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>
/* 头部框框 */
.header{
  background-color: rgb(255, 213, 21);
  height: 160px;
  width: 100%;
  box-shadow:  3.3px 6.6px 6.6px hsl(0deg 0% 0% /0.20);

}
/* cartoonist的字体 */
.logo-font{
  margin-left: 2%;
  margin-top: 3%;
  width:  18%;
}
/* 输入框 */
.input_box{
  float: right;
  position: absolute;
  right: 360px;
  width: 700px;
  height: 130px;
  border: 2px solid black;
  border-radius: 10px;
  top: 1%;
  visibility: hidden;
}
/* 输入框的那根笔 */
.input_box_logo{
  width: 40px;
  margin-top: 2%;
  margin-left: 2%;
}
/* 输入书名的输入框 */
.input_book_name_text{
  background: none;
  border: 0;
  font-size: 30px;
  color: rgb(133, 111, 11);
  margin-left: 1%;
  margin-top: 0.5%;
}
/* 输入相关词句的框框 */
.input_relative_sentence{
  background: none;
  border: 0;
  font-size: 20px;
  color: rgb(133, 111, 11);
  margin-left: 0.8%;
  margin-top: 0.5%;
  width: 100%;
}
/* 创建封面按钮 */
.create_main_page_button{
  float: right;
  background-color: white;
  height: 30px;
  width: 120px;
  border: 0;
  border-radius: 10px;
  position: absolute;
  right: 200px;
  top: 40px;
  font-size: 24px;
  color: rgb(255, 213, 21);
  box-shadow:  3.3px 2.6px 2.6px hsl(0deg 0% 0% /0.10);
}
</style>